<template>
	<div class="wrap">
		<div class="wrapf2">
		<p>我的消息</p>
		<ul class="myxiaoxif">
			<li class="tittlef5">
				<div class="biaotif">标题</div>
				<div class="fasongf">发送时间</div>
				<div class="zhuangtf">状态</div>
				<div class="caozuof2">操作</div>
			</li>
			<li>
				<div class="biaotif">您的货物已发货您的货物已发货您的货物已发货 </div>
				<div class="fasongf">2015年9月23日 15:25:07</div>
				<div class="zhuangtf">未查看 </div>
				<div class="caozuof2">
					<span class="chakanf">查看</span>
					<div></div>
					<span class="shanchuff">删除</span>
				</div>
			</li>
			<li>
				<div class="biaotif">您的货物已发货您的货物已发货您的货物已发货 </div>
				<div class="fasongf">2015年9月23日 15:25:07</div>
				<div class="zhuangtf">未查看 </div>
				<div class="caozuof2">
					<span class="chakanf">查看</span>
					<div></div>
					<span class="shanchuff">删除</span>
				</div>
			</li>
			<li>
				<div class="biaotif">您的货物已发货您的货物已发货您的货物已发货 </div>
				<div class="fasongf">2015年9月23日 15:25:07</div>
				<div class="zhuangtf">未查看 </div>
				<div class="caozuof2">
					<span class="chakanf">查看</span>
					<div></div>
					<span class="shanchuff">删除</span>
				</div>
			</li>
			<li>
				<div class="biaotif">您的货物已发货您的货物已发货您的货物已发货 </div>
				<div class="fasongf">2015年9月23日 15:25:07</div>
				<div class="zhuangtf">未查看 </div>
				<div class="caozuof2">
					<span class="chakanf">查看</span>
					<div></div>
					<span class="shanchuff">删除</span>
				</div>
			</li>
			<li>
				<div class="biaotif">您的货物已发货您的货物已发货您的货物已发货 </div>
				<div class="fasongf">2015年9月23日 15:25:07</div>
				<div class="zhuangtf">未查看 </div>
				<div class="caozuof2">
					<span class="chakanf">查看</span>
					<div></div>
					<span class="shanchuff">删除</span>
				</div>
			</li>
			<li>
				<div class="biaotif">您的货物已发货您的货物已发货您的货物已发货 </div>
				<div class="fasongf">2015年9月23日 15:25:07</div>
				<div class="zhuangtf">未查看 </div>
				<div class="caozuof2">
					<span class="chakanf">查看</span>
					<div></div>
					<span class="shanchuff">删除</span>
				</div>
			</li>
			<li>
				<div class="biaotif">您的货物已发货您的货物已发货您的货物已发货 </div>
				<div class="fasongf">2015年9月23日 15:25:07</div>
				<div class="zhuangtf">未查看 </div>
				<div class="caozuof2">
					<span class="chakanf">查看</span>
					<div></div>
					<span class="shanchuff">删除</span>
				</div>
			</li>
		</ul>
		<p class="fahuof">您的货物已发货</p>
		<p class="shijianf1">2015年9月23日 15:24</p>
		<div class="txtf">
			自幼曾攻经史，长成亦有权谋。恰如猛虎卧荒丘，潜伏爪牙忍受。不幸刺文双颊，那堪配在江州。他年若得报冤仇，血染浔阳江口!自幼曾攻经史，长成亦有权谋恰如猛虎卧荒丘，潜伏爪牙忍受。不幸刺文双颊，那堪配在江州。他年若得报冤仇，血染浔阳江口!自幼曾攻经史，长成亦有权谋。恰如猛虎卧荒丘，潜伏爪牙忍受。不幸刺文双颊，那堪配在江州。他年若得报冤仇，血染浔阳江口!自幼曾攻经史，长成亦有权谋。恰如猛虎卧荒丘，潜伏爪牙忍受。不幸刺文双颊，那堪配在江州。他年若得报冤仇，血染浔阳江口!自幼曾攻经史，长成亦有权谋。恰如猛虎卧荒丘，潜伏爪牙忍受。不幸刺文双颊，那堪配在江州。他年若得报冤仇，血染浔阳江口!自幼曾攻经史，长成亦有权谋。恰如猛虎卧荒丘，潜伏爪牙忍受。不幸刺文双颊，那堪配在江州。他年若得报冤仇，血染浔阳江口!自幼曾攻经史，长成亦有权谋。恰如猛虎卧荒丘，潜伏爪牙忍受。不幸刺文双颊，那堪配在江州。他年若得报冤仇，血染浔阳江口!
		</div>
		<div class="fanhuif2">返回</div>
	</div>
	</div>
</template>

<script>
	export default {
		methods: {
			yijianf: function() {
                  $(".myxiaoxif li").mouseover(function(){
                  	  if ($(this).index()>0) {
                  	  	  $(this).addClass("activef2").siblings().removeClass("activef2");
                  	  };
                  });
                  $(".caozuof2 .shanchuff").click(function(){
                  	  $(this).parent().parent().slideUp(500);
                  });
                  $(".caozuof2 .chakanf").click(function(){
                  	  $(".myxiaoxif").slideUp(500);
                  	  $(".fahuof").slideDown(500);
                  	  $(".shijianf1").slideDown(500);
                  	  $(".txtf").slideDown(500);
                  	  $(".fanhuif2").fadeIn(500);
                  });
                  $(".fanhuif2").click(function(){
                  	  $(".myxiaoxif").slideDown(500);
                  	  $(".fahuof").fadeOut(500);
                  	  $(".shijianf1").fadeOut(500);
                  	  $(".txtf").fadeOut(500);
                  	  $(".fanhuif2").fadeOut(500);
                  });
			},
		},
		mounted: function() {
			//只有在mounted之后，才可以执行dom操作，也就是说可以在这个方法里面执行那些需要加载立即执行的方法
			this.yijianf();
		},
		components: {
			
		}
	}
</script>

<style scoped="scoped">
	 .wrapf2 {
		width: 1085px;
		float: left;
		height: 625px;
		margin-left: 20px;
		border: 1px solid #e7e7e7;
		position: relative;
	}
	.wrapf2 p:first-child{
		font-size: 18px;
		color: #323333;
		padding: 20px;
		box-sizing: border-box;
		border-bottom: 1px solid #CCCCCC;
	}
	.fahuof{
		font-size: 18px;
		color: #4b943d;
		text-align: center;
		padding-top: 40px;
		padding-bottom: 30px;
		display: none;
	}
	.shijianf1{
		font-size: 14px;
		color: #999999;
		text-align: right;
		display: none;
		padding-right: 40px;
	}
	.txtf{
		padding: 30px;
		line-height: 30px;
		font-size: 13px;
		color: #666666;
		display: none;
	}
	.myxiaoxif{
		width: 1041px;
		border: solid 1px #e9e9e9;
		border-bottom: none;
		margin: 20px;
	}
	.myxiaoxif .tittlef5{
		color: #333333;
		font-size: 16px;
		background: rgb(242,242,242);
	}
	.myxiaoxif li{
		height: 46px;
		border-bottom: solid 1px #e9e9e9;
		font-size: 14px;
		color: #666666;
		line-height: 46px;
		box-sizing: border-box;
	}
	.myxiaoxif li div{
		display: inline-block;
		text-align: center;
	}
	.myxiaoxif .activef2{
		background: rgb(244,255,242);
	}
	.biaotif{
		width: 400px;
	}
	.fasongf{
		width: 200px;
		margin-left: 150px;
	}
	.zhuangtf{
		width: 150px;
	}
	.caozuof2{
		width: 100px;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.caozuof2 div{
		width: 2px;
		height: 14px;
		background: #BCBCBC;
		transform: translateY(2px);
	}
	.myxiaoxif .caozuof2 span{
		color: #4b943d;
		cursor: pointer;
		-webkit-user-select: none;
		-moz-user-select: none;
		-ms-user-select: none;
		user-select: none;
	}
	.fanhuif2{
		width: 80px;
		height: 30px;
		border-radius: 5px;
		background: #CCCCCC;
		cursor: pointer;
		font-size: 15px;
		text-align: center;
		line-height: 30px;
		color: #FFFFFF;
		margin-left: 500px;
		display: none;
	}
</style>